<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>题库设计 - 选择题</title>
    <link rel="stylesheet" href="../../css/mdui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        ol {
            list-style: upper-alpha !important;
        }
        
        .mdui-panel-item {
            color: rgba(0, 0, 0, .87);
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, .12);
            -webkit-box-shadow: none;
            box-shadow: none;
            -webkit-transition: margin .3s cubic-bezier(.4, 0, .2, 1);
            transition: margin .3s cubic-bezier(.4, 0, .2, 1);
            will-change: margin;
        }
        
        .mdui-panel-item-open>.mdui-panel-item-header {
            display: none;
        }
        
        .choice-titile {
            margin-left: -74px;
        }
    </style>
</head>

<body class="mdui-appbar-with-toolbar mdui-color-grey-50">
    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="./index.html" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">arrow_back</i></a>
                <a href="../index.html" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <!-- 一个通知按钮 -->
                <a href="../Personal/notice.html">
                    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                            <i class="mdui-icon material-icons">notifications</i>
                        </span>
                </a>

                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-menu="{target: '#login-menu'}">
                        <i class="mdui-icon material-icons">account_circle</i>
                    </span>
                <!-- 小菜单 -->
                <ul class="mdui-menu mdui-menu-cascade mdui-menu-cascade-custom" id="login-menu">
                    <li class="mdui-menu-item">
                        <div class="mdui-row mdui-valign">
                            <div class="mdui-col-md-3 mdui-m-l-3">
                                <div class="user-head-img mdui-img-circle" style="background: url(../../images/touxiang1.jpg);"></div>
                            </div>
                            <div class="mdui-col-md-7 mdui-typo">
                                <div>姓名：李老师</div>
                                <div>工号：91145</div>
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider"></li>
                    <li class="mdui-menu-item">
                        <a href="../Personal/notice.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">notifications_none</i>我的通知
                        </a>
                        <a href="../Personal/message.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">chat_bubble_outline</i>我的留言
                        </a>
                        <a href="../Personal/setting.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">settings</i>设置
                        </a>
                        <a href="../../login.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">exit_to_app</i>登出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->

    <article>
        <!-- 顶部练习导航菜单 -->
        <div class="mdui-container">
            <p><br></p>
            <ul class="mdui-list mdui-color-white mdui-shadow-1">

                <div class="mdui-row">
                    <li class="mdui-subheader-inset">选择题</li>
                </div>
                <div class="mdui-row-xs-2 mdui-valign mdui-text-center">

                    <div class="mdui-col">
                        <button class="mdui-btn mdui-ripple " mdui-tooltip="{content: '手动添加新的练习题'}" mdui-dialog="{target: '#add-choice'}">
                                                    添加习题
                        </button>
                    </div>


                    <div class="mdui-col">
                        <button class="mdui-btn mdui-ripple ">导入习题</button>
                    </div>


                </div>
                <!-- 添加练习题对话框 -->
                <div class="mdui-dialog" id="add-choice">
                    <div class="mdui-dialog-title">选择题编辑</div>
                    <div class="mdui-dialog-content">
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <label class="mdui-textfield-label">题目</label>
                            <input class="mdui-textfield-input" type="text" required/>
                            <div class="mdui-textfield-error">此填写项不能为空</div>
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">A</i>
                            <label class="mdui-textfield-label">选项A</label>
                            <input class="mdui-textfield-input" type="text" />
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">B</i>
                            <label class="mdui-textfield-label">选项B</label>
                            <input class="mdui-textfield-input" type="text" />
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">C</i>
                            <label class="mdui-textfield-label">选项C</label>
                            <input class="mdui-textfield-input" type="text" />
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <i class="mdui-icon material-icons">D</i>
                            <label class="mdui-textfield-label">选项D</label>
                            <input class="mdui-textfield-input" type="text" />
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <label class="mdui-textfield-label">标准答案</label>
                            <input class="mdui-textfield-input" type="text" required/>
                            <div class="mdui-textfield-error">此填写项不能为空</div>
                        </div>
                        <div class="mdui-textfield mdui-textfield-floating-label">
                            <textarea class="mdui-textfield-input" rows="6" placeholder="试题解析"></textarea>
                            <div class="mdui-textfield-error">此填写项不能为空</div>
                        </div>
                    </div>
                    <div class="mdui-dialog-actions">
                        <button class="mdui-btn mdui-ripple" mdui-dialog-close>取消</button>
                        <button class="mdui-btn mdui-ripple">确定</button>
                    </div>
                </div>
            </ul>
        </div>
        <!-- 练习导航菜单结束 -->

        <br>
        <!-- 练习试题内容 -->
        <div class="mdui-container mdui-color-white mdui-shadow-1">

            <div class="mdui-typo mdui-text-center mdui-p-t-1">
                <h4> 选择题练习题 <small>（56）</small></h4>
            </div>

            <!-- 题目 -->
            <div class="mdui-typo mdui-m-l-1">
                <span class="mdui-chip-icon">1</span>
                <h6 class="mdui-chip-title">操作系统负责管理计算机系统的（   ），其中包括处理机、存储器、设备和文件。</h6>
                <!-- 操作按钮 -->
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '修改习题'}" mdui-dialog="{target: '#add-choice'}">
                    <i class="mdui-icon material-icons">create</i>
                </button>
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '删除习题'}">
                    <i class="mdui-icon material-icons">delete</i>
                </button>
                <ol class="mdui-m-l-5">
                    <li>程序</li>
                    <li>文件</li>
                    <li>资源</li>
                    <li>进程</li>
                </ol>
            </div>

            <!-- 解析 -->
            <div class="mdui-panel mdui-m-b-2" mdui-panel>
                <div class="mdui-panel-item mdui-panel-item-open">
                    <div class="mdui-panel-item-header">
                        <div class="mdui-panel-item-title"><button class="mdui-btn">查看解析</button></div>
                    </div>
                    <div class="mdui-panel-item-body">
                        <div class="mdui-chip">
                            <span class="mdui-chip-title">标准答案</span>
                            <span class="mdui-chip-icon mdui-color-green mdui-text-color-white">C</span>
                        </div>

                        <div class="mdui-typo">
                            <blockquote>
                                <footer>试题解析：</footer>
                                <p>操作系统是计算机系统的核心软件。按功能特征的不同，可把操作系统分为[1]、[2]、[3]、网络操作系统 和分布式操作系统基本类型。
                                </p>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>


            <div class="mdui-divider"></div>

            <!-- 题目 -->
            <div class="mdui-typo mdui-m-l-1">
                <span class="mdui-chip-icon">2</span>
                <h6 class="mdui-chip-title">在分时系统中，时间片一定，（    ），响应时间越长。</h6>
                <!-- 操作按钮 -->
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '修改习题'}" mdui-dialog="{target: '#add-choice'}">
                        <i class="mdui-icon material-icons">create</i>
                    </button>
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '删除习题'}">
                        <i class="mdui-icon material-icons">delete</i>
                    </button>
                <ol class="mdui-m-l-5">
                    <li>内存越多</li>
                    <li>用户数越多</li>
                    <li>用户数越少</li>
                    <li>后备队列</li>
                </ol>
            </div>

            <!-- 解析 -->
            <div class="mdui-panel mdui-m-b-2" mdui-panel>
                <div class="mdui-panel-item mdui-panel-item-open">
                    <div class="mdui-panel-item-header">
                        <div class="mdui-panel-item-title"><button class="mdui-btn">查看解析</button></div>
                    </div>
                    <div class="mdui-panel-item-body">
                        <div class="mdui-chip">
                            <span class="mdui-chip-title">标准答案</span>
                            <span class="mdui-chip-icon mdui-color-green mdui-text-color-white">B</span>
                        </div>
                        <div class="mdui-typo">
                            <blockquote>
                                <footer>试题解析：</footer>
                                <p>操作系统是计算机系统的核心软件。按功能特征的不同，可把操作系统分为[1]、[2]、[3]、网络操作系统 和分布式操作系统基本类型。
                                </p>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mdui-divider"></div>

            <!-- 题目 -->
            <div class="mdui-typo mdui-m-l-1">
                <span class="mdui-chip-icon">3</span>
                <h6 class="mdui-chip-title">在分时系统中，时间片一定，（    ），响应时间越长。</h6>
                <!-- 操作按钮 -->
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '修改习题'}" mdui-dialog="{target: '#add-choice'}">
                        <i class="mdui-icon material-icons">create</i>
                    </button>
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '删除习题'}">
                        <i class="mdui-icon material-icons">delete</i>
                    </button>
                <ol class="mdui-m-l-5">
                    <li>内存越多</li>
                    <li>用户数越多</li>
                    <li>用户数越少</li>
                    <li>后备队列</li>
                </ol>
            </div>

            <!-- 解析 -->
            <div class="mdui-panel mdui-m-b-2" mdui-panel>
                <div class="mdui-panel-item mdui-panel-item-open">
                    <div class="mdui-panel-item-header">
                        <div class="mdui-panel-item-title"><button class="mdui-btn">查看解析</button></div>
                    </div>
                    <div class="mdui-panel-item-body">
                        <div class="mdui-chip">
                            <span class="mdui-chip-title">标准答案</span>
                            <span class="mdui-chip-icon mdui-color-green mdui-text-color-white">B</span>
                        </div>
                        <div class="mdui-typo">
                            <blockquote>
                                <footer>试题解析：</footer>
                                <p>操作系统是计算机系统的核心软件。按功能特征的不同，可把操作系统分为[1]、[2]、[3]、网络操作系统 和分布式操作系统基本类型。
                                </p>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mdui-divider"></div>

            <!-- 题目 -->
            <div class="mdui-typo mdui-m-l-1">
                <span class="mdui-chip-icon">4</span>
                <h6 class="mdui-chip-title">在分时系统中，时间片一定，（    ），响应时间越长。</h6>
                <!-- 操作按钮 -->
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '修改习题'}" mdui-dialog="{target: '#add-choice'}">
                        <i class="mdui-icon material-icons">create</i>
                    </button>
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '删除习题'}">
                        <i class="mdui-icon material-icons">delete</i>
                    </button>
                <ol class="mdui-m-l-5">
                    <li>内存越多</li>
                    <li>用户数越多</li>
                    <li>用户数越少</li>
                    <li>后备队列</li>
                </ol>
            </div>

            <!-- 解析 -->
            <div class="mdui-panel mdui-m-b-2" mdui-panel>
                <div class="mdui-panel-item mdui-panel-item-open">
                    <div class="mdui-panel-item-header">
                        <div class="mdui-panel-item-title"><button class="mdui-btn">查看解析</button></div>
                    </div>
                    <div class="mdui-panel-item-body">
                        <div class="mdui-chip">
                            <span class="mdui-chip-title">标准答案</span>
                            <span class="mdui-chip-icon mdui-color-green mdui-text-color-white">B</span>
                        </div>
                        <div class="mdui-typo">
                            <blockquote>
                                <footer>试题解析：</footer>
                                <p>操作系统是计算机系统的核心软件。按功能特征的不同，可把操作系统分为[1]、[2]、[3]、网络操作系统 和分布式操作系统基本类型。
                                </p>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mdui-divider"></div>

            <!-- 题目 -->
            <div class="mdui-typo mdui-m-l-1">
                <span class="mdui-chip-icon">5</span>
                <h6 class="mdui-chip-title">在分时系统中，时间片一定，（    ），响应时间越长。</h6>
                <!-- 操作按钮 -->
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '修改习题'}" mdui-dialog="{target: '#add-choice'}">
                        <i class="mdui-icon material-icons">create</i>
                    </button>
                <button class="mdui-btn mdui-btn-icon mdui-btn-raised mdui-ripple mdui-btn-dense" mdui-tooltip="{content: '删除习题'}">
                        <i class="mdui-icon material-icons">delete</i>
                    </button>
                <ol class="mdui-m-l-5">
                    <li>内存越多</li>
                    <li>用户数越多</li>
                    <li>用户数越少</li>
                    <li>后备队列</li>
                </ol>
            </div>

            <!-- 解析 -->
            <div id="answer" class="mdui-panel mdui-m-b-2" mdui-panel>
                <div class="mdui-panel-item mdui-panel-item-open">
                    <div class="mdui-panel-item-header">
                        <div class="mdui-panel-item-title"><button class="mdui-btn">查看解析</button></div>
                    </div>
                    <div class="mdui-panel-item-body">
                        <div class="mdui-chip">
                            <span class="mdui-chip-title">标准答案</span>
                            <span class="mdui-chip-icon mdui-color-green mdui-text-color-white">B</span>
                        </div>
                        <div class="mdui-typo">
                            <blockquote>
                                <footer>试题解析：</footer>
                                <p>操作系统是计算机系统的核心软件。按功能特征的不同，可把操作系统分为[1]、[2]、[3]、网络操作系统 和分布式操作系统基本类型。
                                </p>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 底部操作面板 -->
            <div class="mdui-container-fluid mdui-m-t-2 mdui-m-b-2">
                <div class="mdui-row-xs-2">
                    <div class="mdui-col">
                        <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">上一页</button>
                    </div>
                    <div class="mdui-col">
                        <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">下一页</button>
                    </div>
                </div>
            </div>

        </div>

    </article>





    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>


    <script src="../../js/mdui.js"></script>
</body>

</html>